<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="records"
      element-loading-text="加载中......"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标签名" align="center">
        <template slot-scope="scope">
          <span>
            <el-tag>
              {{ scope.row}}
            </el-tag>
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="数量" align="center">
        <template slot-scope="scope">
          {{ scope.row.count }}
        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="pomess2"
            >删除</el-button
          >
          <el-button
            type="warning"
            size="mini"
            @click="pomess1"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getTags } from '@/api/tag';

export default {
  data() {
    return {
      records: [],

      listLoading: true,
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.listLoading = true;
      getTags().then((res) => {
        this.records = res.data;
        // console.log(res.data);
        console.log(this.records);
        this.listLoading = false;
      });
    },
    pomess1() {
      const h = this.$createElement;
      this.$notify({
        title: "提示",
        message: h("i", { style: "color: teal" }, "不是我不想写，但分类标签修改都不合理"),
      });
    },
    pomess2() {
      const h = this.$createElement;
      this.$notify({
        title: "提示",
        message: h("i", { style: "color: teal" }, "直接删除不合理，它没文章有这个分类标签会自己没有得。"),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tag {
  margin: 0 5px;
}
.el-pagination {
  margin-top: 10px;
}
</style>
